<template>
  <div class="home">
    <div class="header">
      <div class="header-left">
        <div class="header-left-title">叩丁狼电商运营平台</div>
        <div @click="shrinkageFn" class="header-left-icon">
          <i class="iconfont ums-menu"></i>
        </div>
      </div>
      <div class="header-right">
        <el-dropdown @command="handleCommand">
          <span class="header-right-name">
            {{UserState.username}}
            <el-icon class="header-right-icon "><ArrowDownBold /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="home">首页</el-dropdown-item>
              <el-dropdown-item command="login">退出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <div class="content">
      <el-menu
        active-text-color="#ffd04b"
        background-color="rgb(48, 65, 86)"
        class="el-menu-vertical-demo"
        text-color="#fff"
        :router="true"
        :unique-opened="true"
        mode="vertical"
        :default-active="navIndex"
        :collapse="shrinkageIsShow"
      >
        <el-menu-item
          index="/index"
          :class="{ 'icon-active': route.path === '/index' }"
        >
          <i
            :class="[
              'iconfont',
              'homepage',
              route.path === '/index' ? 'icon-active' : '',
            ]"
          ></i>
          <template #title>首页</template>
        </el-menu-item>
        <el-sub-menu
          :index="item.name"
          v-for="item in meunsRoutes"
          :key="item.id"
        >
          <template #title>
            <i :class="['iconfont', item.icon]"></i>
            <span>{{ item.title }}</span>
          </template>
          <template v-for="citem in item.children" :key="citem.id">
            <el-menu-item
              v-if="!citem.hidden"
              :index="`/${item.name}/${citem.name}`"
              :class="{ 'icon-active': route.name==citem.name }"
            >
              <i
                :class="[
                  'iconfont',
                  citem.icon,
                  route.name==citem.name ? 'icon-active' : '',
                ]"
              ></i>
              {{ citem.title }}
            </el-menu-item>
          </template>
        </el-sub-menu>
      </el-menu>
      <el-container>
        <el-header>
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/index' }"
              >首页</el-breadcrumb-item
            >
            <el-breadcrumb-item
              v-for="(item, index) in crumbArr"
              :to="item.path"
              :key="index"
              >{{ item.name }}</el-breadcrumb-item
            >
          </el-breadcrumb>
        </el-header>
        <el-main class="RouterView"><RouterView /></el-main>
      </el-container>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ArrowDownBold } from "@element-plus/icons-vue";
import { computed, ref, reactive, toRefs, watchEffect, Ref } from "vue";
import { RouterView, useRoute, useRouter } from "vue-router";
import { useUserState } from "@/store/user";
import { ElMessage } from 'element-plus'
import { LoginOut } from "@/common/LoginOut";

// 使用创库
const UserState = useUserState();

// 获取路由参数
const route = useRoute();
const router=useRouter();

// 导航栏数据
const meunsRoutes = computed(() => UserState.getMenusRoutes);

// 导航默认激活
const navIndex: Ref<string> = ref("");

// 面包屑数据
interface ICrumb {
  name?: string;
  path?: string;
}
const crumbArr: ICrumb[] = reactive([]);

// 路由以及面包屑处理
watchEffect(() => {
  crumbArr.splice(0);
  // console.log(route.path);
  let arr: string[] = route.path.split("/").filter((item) => item);
  // console.log(arr);
  if(!meunsRoutes.value)return;
  Object.values(meunsRoutes.value).forEach((item) => {
    if (item.name === arr[0]) {
      // console.log(item);
      let carr: IMenus | undefined = item.children?.find(
        (citem) => citem.name == arr[1]
      );
      crumbArr.push(
        { name: item.title, path: item.children![0].name },
        { name: carr?.title, path: carr?.name }
      );
      // 导航栏默认激活
      navIndex.value = `/${item.name}/${carr?.name}`;
    }
  });
  // console.log("crumbArr:", crumbArr);
});

// 收缩
let shrinkageIsShow = ref(false);
const shrinkageFn = () => {
  shrinkageIsShow.value = !shrinkageIsShow.value;
};
// 用户下拉
const handleCommand = (command: string) => {
  if(command==='home'){
    // 回到首页
    router.push('/index')
  }else if(command==='login'){
    // 退出登录
    // 调用退出登录接口
    LoginOut(()=>{
      // 退出登录接口请求
      console.log('退出接口调用');
    },()=>{
      // 退出登录后的处理
      ElMessage.success('成功退出登录!')
    });
    // // 删除token
    // localStorage.removeItem('token')
    // // 清除仓库数据
    // UserState.updatedMenus({
    //   menus:[],
    //   username:''
    // });
    // // 清除动态路由
    // const routeArr=router.getRoutes();
    // console.log(routeArr);
    // routeArr.forEach(r=>{
    //   if(r.name&&r.name!='login')router.removeRoute(r.name)
    // })
    // // 跳转登录页面
    // router.push('/login')
  }
}
</script>

<style lang="less" scoped>
.home {
  .header {
    height: 70px;
    padding: 0 20px;
    display: flex;
    color: #fff;
    justify-content: space-between;
    align-items: center;
    background-color: #409eff;
  }
  .header-left {
    display: flex;
    align-items: center;
    .header-left-title {
      font-size: 24px;
      margin-right: 20px;
    }
    .header-left-icon {
      .iconfont {
        font-size: 20px;
        vertical-align: middle;
      }
    }
  }

  .header-right {
    .header-right-name {
      color: #fff !important;
      margin-right: 10px;
    }
  }
  .content {
    display: flex;
    justify-content: space-between;
    .icon-active {
      color: #408fe8 !important;
    }
    .content-right {
      width: 100%;
    }
  }
}
:deep(.el-menu-vertical-demo) {
  height: calc(100vh - 70px);
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 250px;
  min-height: 400px;
}
:deep(.is-active) {
  color: #fff;
}
:deep(.el-breadcrumb) {
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
}
:deep(.el-menu){
  border-right:none;
}
:deep(.el-main.RouterView){
  height: calc(100vh - 130px);
  overflow-y: auto;
}
</style>
